import React, { useState } from 'react'
//一些样式
let style = { color: 'red', marginRight: '5px', fontSize: '18px' }

const TodoOptions = (props) => {
    // console.log(props)
    let { todos, onOptionChange, aCount, cCount } = props; //获取todos

    return (
        <div className="options">
            <button onClick={() => {
                onOptionChange('all')

            }}>全部</button>
            <span style={style}>{todos.length}</span>
            <span>条事项</span>
            <button onClick={() => {
                onOptionChange('completed')
            }}>已完成:
                <span style={style}>{cCount}</span>
            </button>
            <button onClick={() => {
                onOptionChange('active')
            }}>未完成:
                <span style={style}>{aCount}</span>
            </button>
        </div>
    )
}

export default TodoOptions